<template>
  <div>
<!--<h3>当前最新的count值为：{{$store.state.count}}</h3>-->
    <h3>{{$store.getters.showNum}}</h3>
    <button @click="btnHandle1">+1</button>
    <button @click="btnHandle2">+N</button>
    <button @click="btnHandle3">+1 Async</button>
    <button @click="btnHandle4">+N Async</button>
  </div>
</template>

<script>
export default {
  name: 'Addition',
  data () {
    return {}
  },
  // 触发mutations
  methods: {
    btnHandle1 () {
      // 触发mutations的第一种方式
      this.$store.commit('add')
    },
    btnHandle2 () {
      // 触发mutations并且传递参数
      this.$store.commit('addN', 3)
    },
    // 异步让 count 自增+1
    btnHandle3 () {
      // 这里的dispatch 函数,用来触发 action
      this.$store.dispatch('addAsync')
    },
    // 异步让 count 自增+N
    btnHandle4 () {
      // 这里的dispatch 函数,用来触发 action
      this.$store.dispatch('addAsyncN', 3)
    }
  }
}
</script>

<style scoped>

</style>
